<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .clock {
            width: 300px;
            height: 300px;
            border: 10px solid #ccc;
            border-radius: 50%;
            position: relative;
            margin: 200px auto;
        }

        .public {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .line {
            height: 100%;
            width: 10px;
            background-color: #ccc;

        }

        .line2 {
            transform: translate(-50%, -50%) rotate(30deg);
        }

        .line3 {
            transform: translate(-50%, -50%) rotate(60deg);
        }

        .line4 {
            transform: translate(-50%, -50%) rotate(90deg);
        }

        .line5 {
            transform: translate(-50%, -50%) rotate(120deg);
        }

        .line6 {
            transform: translate(-50%, -50%) rotate(150deg);
        }

        .over {
            width: 260px;
            height: 260px;
            background-color: #fff;
            border-radius: 50%;
        }

        .base {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            transform-origin: center bottom;
        }

        .hour {
            width: 10px;
            height: 80px;
            background-color: red;
            /*animation: move 43200s linear infinite;*/
        }

        .minute {
            width: 8px;
            height: 100px;
            background-color: green;
            /*animation: move 3600s linear infinite;*/
        }

        .second {
            width: 6px;
            height: 120px;
            background-color: orange;
            /*animation: move 60s steps(60) infinite;*/
        }

        .center {
            width: 20px;
            height: 20px;
            background-color: #ccc;
            border-radius: 50%;
        }

        @keyframes move {
            from {
                transform: translate(-50%, -100%) rotate(0deg);
            }
            to {
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="clock">
    <div class="line public line1"></div>
    <div class="line public line2"></div>
    <div class="line public line3"></div>
    <div class="line public line4"></div>
    <div class="line public line5"></div>
    <div class="line public line6"></div>
    <div class="over public"></div>
    <div class="hour base"></div>
    <div class="minute base"></div>
    <div class="second base"></div>
    <div class="center public"></div>
</div>
<script>
    let second = document.querySelector('.second')
    let minute = document.querySelector('.minute')
    let hour = document.querySelector('.hour')
    let t = null
    let s = 0
    let sAngle = 0
    let m = 0
    let mAngle = 0
    let h = 0
    let hAngle = 0

    function getTime() {
        t = new Date()
        h = t.getHours()
        m = t.getMinutes()
        s = t.getSeconds()
        if (h >= 12) {
            hAngle = (h - 12) * 3600 / 43200 * 360
        } else {
            hAngle = h * 3600 / 43200 * 360
        }

        mAngle = m * 60 / 3600 * 360
        sAngle = s / 60 * 360
    }

    getTime()
    init()

    let hms = {h: false, m: false, s: false} //记录时分秒 各自到 0 时的记录

    let timer = setInterval(function () {
        getTime()

        if (s === 0) {
            if (!hms.s) {
                hms.s = true
            }
            second.style.animationName = 'move'
            second.style.animationTimingFunction = `steps(60)`
            second.style.animationDuration = `60s`
            second.style.animationIterationCount = 'infinite'
        }
        if (m === 0) {
            if (!hms.m) {
                hms.m = true
            }
            minute.style.animationName = 'move'
            minute.style.animationTimingFunction = 'linear'
            minute.style.animationDuration = '3600s'
            minute.style.animationIterationCount = 'infinite'
        }
        if (h === 0) {
            hour.style.animationName = 'move'
            hour.style.animationTimingFunction = 'linear'
            hour.style.animationDuration = '43200s'
            hour.style.animationIterationCount = 'infinite'
        }
        if (hms.h && hms.m && hms.s) {
            clearInterval(timer)
        }
    }, 1000)


    function init() {


        let keyFrames = `
        @keyframes dSMove{
            from{
                transform: translate(-50%, -100%) rotate(${sAngle}deg)
            }
            to {
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
        @keyframes dMMove{
            from{
                transform: translate(-50%, -100%) rotate(${mAngle}deg)
            }
            to {
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
        @keyframes dHMove{
            from{
                transform: translate(-50%, -100%) rotate(${hAngle}deg)
            }
            to {
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
    `


        const style = document.createElement('style');

// 将 keyframes样式写入style内
        style.innerHTML = keyFrames;
// 将style样式存放到head标签
        document.querySelector('head').appendChild(style)
        // second.style
        // console.log(document.styleSheets)
        second.style.animationName = 'dSMove'
        second.style.animationTimingFunction = `steps(${59 - s})`
        second.style.animationDuration = `${59 - s}s`
        second.style.animationIterationCount = '1'

        minute.style.animationName = 'dMMove'
        minute.style.animationTimingFunction = 'linear'
        minute.style.animationDuration = `${3600 - m * 60}s`
        minute.style.animationIterationCount = '1'

        hour.style.animationName = 'dHMove'
        hour.style.animationTimingFunction = 'linear'
        let durationHour = 0
        if (h >= 12) {
            durationHour = 43200 - ((h - 12) * 3600 + m * 60 + s)
        } else {
            durationHour = 43200 - (h * 3600 + m * 60 + s)
        }
        hour.style.animationDuration = `${durationHour}s`
        hour.style.animationIterationCount = '1'
    }


</script>
</body>
</html>